import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { Card, Modal } from 'antd';
import styles from './index.less';
import moment from 'moment';
import { API_URL } from '@/config/api';

import {
  Const
} from '../../Const';

const ImageBox = props => {

  const { pkgImgList = [] } = props;

  const imgPreview = useCallback((imgUrl) => {
    Modal.info({
      title: '图片详情',
      width: 800,
      icon: '',
      content: (
        <img
          style={{ width: '100%', display: 'block' }}
          src={API_URL + `/api/uploadAndDownload/showImg?imgUrl=` + imgUrl}
          alt="" />
      ),
      okText: '确定'
    });
  }, []);

  return (
    <div className={styles.imageBoxContent}>
      <Card title="附件" style={{ width: '100%' }}>
        <div className={styles.imgContent}>
          {pkgImgList.map((item, index) => (
            <Card className={styles.imgContentCard} key={index}>
              <div className={styles.imgBox}>
                <img src={API_URL + `/api/uploadAndDownload/showImg?imgUrl=` + item.imgUrl} onClick={() => imgPreview(item.imgUrl)} alt="" />
              </div>
              <div>{Const.shaoShouImgListMap[item.oneType].text}</div>
              <div>{Const.shaoShouImgListMap[item.oneType].children[item.twoType]}</div>
            </Card>
          ))}
        </div>
      </Card>
    </div>
  )
}

export default ImageBox;
